<template>
  <div class="flowChart">
    <div class="posAb">
      <el-button size="mini" @click.native="measurement(1)">{{ $t('btn.reload') }}</el-button>
    </div>
    <div id="myChart" ref="myChart" :style="{width: '100%', height: '100%'}" />
  </div>
</template>

<script>
import { NodeJson } from '@/api/userFilter'
import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import { GraphChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LegendComponent } from 'echarts/components'
echarts.use([TitleComponent, TooltipComponent, GraphChart, CanvasRenderer, LegendComponent])
export default {
  name: 'FlowChart',
  data() {
    return {
      NodesData: [],
      ConnectionData: [],
      colorChart: '',
      categories: [
        { label: { backgroundColor: 'rgba(15,232,189,0.2)' }},
        { label: { backgroundColor: 'rgba(217,26,64,0.2)' }},
        { label: { backgroundColor: 'rgb(238,189,13,0.2)' }},
        { label: { backgroundColor: 'rgb(91,238,12,0.2)' }},
        { label: { backgroundColor: 'rgb(13,50,238,0.2)' }},
        { label: { backgroundColor: 'rgba(116,132,215,0.2)' }},
        { label: { backgroundColor: 'rgba(231,101,101,0.2)' }},
        { label: { backgroundColor: 'rgba(213,165,110,0.2)' }},
        { label: { backgroundColor: 'rgba(121,203,103,0.2)' }},
        { label: { backgroundColor: 'rgba(17,175,94,0.2)' }},
        { label: { backgroundColor: 'rgba(15,232,189,0.4)' }},
        { label: { backgroundColor: 'rgba(217,26,64,0.4)' }},
        { label: { backgroundColor: 'rgb(238,189,13,0.4)' }},
        { label: { backgroundColor: 'rgb(91,238,12,0.4)' }},
        { label: { backgroundColor: 'rgb(13,50,238,0.4)' }},
        { label: { backgroundColor: 'rgba(116,132,215,0.4)' }},
        { label: { backgroundColor: 'rgba(231,101,101,0.4)' }},
        { label: { backgroundColor: 'rgba(213,165,110,0.4)' }},
        { label: { backgroundColor: 'rgba(121,203,103,0.4)' }},
        { label: { backgroundColor: 'rgba(17,175,94,0.4)' }},
        { label: { backgroundColor: 'rgba(15,232,189,0.7)' }},
        { label: { backgroundColor: 'rgba(217,26,64,0.7)' }},
        { label: { backgroundColor: 'rgb(238,189,13,0.7)' }},
        { label: { backgroundColor: 'rgb(91,238,12,0.7)' }},
        { label: { backgroundColor: 'rgb(13,50,238,0.7)' }},
        { label: { backgroundColor: 'rgba(116,132,215,0.7)' }},
        { label: { backgroundColor: 'rgba(231,101,101,0.7)' }},
        { label: { backgroundColor: 'rgba(213,165,110,0.7)' }},
        { label: { backgroundColor: 'rgba(121,203,103,0.7)' }},
        { label: { backgroundColor: 'rgba(17,175,94,0.7)' }},
        { label: { backgroundColor: 'rgba(144,65,175,0.7)' }},
        { label: { backgroundColor: 'rgba(144,65,175,0.2)' }},
        { label: { backgroundColor: 'rgba(143,44,86,0.7)' }},
        { label: { backgroundColor: 'rgb(219,255,219, 0.6)' }},
        { label: { backgroundColor: 'rgba(32,94,80,0.71)' }}
      ]
    }
  },
  created() {
    this.measurement()
  },
  methods: {
    measurement(ev) {
      NodeJson({ fbillNo: this.$route.params.id }).then(res => {
        if (res.code === 0) {
          this.NodesData = []
          this.ConnectionData = res.data.ConnectionData
          // const a = document.getElementsByClassName('flowChart')[0]
          // a.style.width = res.data.maxWidth * 200 + 'px'
          // a.style.height = res.data.maxHeight * 90 + 'px'
          res.data.NodesData.forEach(item => {
            item.nodes.forEach((res, index) => {
              const length = item.nodes.length
              this.NodesData.push({
                name: res.nodeName,
                x: item.step * 200,
                y: (600 / (length + 1 * 1)) * (index + 1 * 1),
                url: res.targetUrl,
                category: res.category
              })
            })
          })
          this.drawLine()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 模板
    drawLine() {
      const _this = this
      // // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('myChart'))
      myChart.on('click', function(params) {
        const path = params.data.url
        _this.$router.push({ path: path })
      })
      // 绘制图表
      myChart.setOption({
        title: {
          text: '全流程图'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: [0, 100],
            roam: true,
            label: {
              show: true,
              width: 100,
              height: 30,
              padding: 2,
              color: '#333',
              overflow: 'breakAll',
              backgroundColor: 'rgba(94,234,69,0.2)',
              borderRadius: 3,
              borderWidth: 0.3,
              borderColor: 'rgb(7,238,191)',
              borderType: 'solid'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 16
            },
            data: this.NodesData, // 数据位置 名称
            // links: [],
            links: this.ConnectionData, // 连接数据
            categories: this.categories, // 关联 category - 下标,
            itemStyle: {
              color: 'rgba(255,255,255,0)'
            },
            lineStyle: {
              opacity: 0.6,
              width: 2,
              curveness: 0
            }
          }
        ]
      }, true)
    }
  }
}
</script>

<style scoped lang="scss">
.flowChart {
  padding: 10px;
  background: #fff;
  width: 100%;
  height: calc(100vh - 100px);
  position: relative;
  .posAb {
    position: absolute;
    left: 120px;
    z-index: 99999;
  }
}
</style>
